<!-- Sidebar.vue -->
<template>
  <el-aside class="sidebar">
    <ul class="sidebar-menu">
      <li :class="{'active': isActive('/dashboard')}"><router-link to="/dashboard" class="sidebar-link">首页</router-link></li>
      <li :class="{'active': isActive('/admin/order')}"><router-link to="/admin/order" class="sidebar-link">订单管理</router-link></li>
      <li :class="{'active': isActive('/admin/locker')}"><router-link to="/admin/locker" class="sidebar-link">快递柜管理</router-link></li>
      <li :class="{'active': isActive('/admin/role')}"><router-link to="/admin/role" class="sidebar-link">用户管理</router-link></li>
      <li :class="{'active': isActive('/admin/monitor')}"><router-link to="/admin/monitor" class="sidebar-link">权限管理</router-link></li>
    </ul>
  </el-aside>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

const isActive = (path) => {
  return route.path === path;
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #2C3E50;
  color: white;
  padding: 20px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
}

.sidebar-link {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

.sidebar-link:hover, .active {
  background-color: #34495E;
}
</style>